<template>
  <el-tooltip :visible="isDuplicate" effect="customized" placement="top-start">
    <template #content>
      <span>输入内容已存在！</span>
    </template>
    <el-input
      v-model="inputValue"
      clearable
      @input="checkDuplicate"
      placeholder="请输入内容"
      :class="{ shake: isDuplicate, 'is-duplicate': isDuplicate }"
    >
    </el-input>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 模拟已存在的数据
const existingData = ref(["apple", "banana", "cherry"]);
const inputValue = ref("");
const isDuplicate = ref(false);

const checkDuplicate = () => {
  isDuplicate.value = existingData.value.includes(inputValue.value);
};
</script>

<style scoped>
/* 定义抖动动画 */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 应用抖动动画的类 */
.shake {
  animation: shake 0.3s ease-in-out;
}
</style>

<style>
/* 自定义红色告警主题的提示框样式 */
.el-popper.is-customized {
  padding: 6px 12px;
  background: #ff0000; /* 设置提示框背景为红色 */
  color: #fff; /* 设置提示框文字颜色为白色 */
  border: none; /* 去除边框 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 自定义红色告警主题提示框箭头的样式 */
.el-popper.is-customized .el-popper__arrow::before {
  background: #ff0000; /* 设置箭头背景为红色 */
  right: 0;
}

/* 修改输入框样式 */
.el-input.is-duplicate input {
  border-color: red;
  color: red;
}
</style>
